<template>
  <view class="planting-container">
    <view class="header">
      <text class="title">播种记录</text>
      <view class="add-btn" @click="navigateTo('/pages/agriculture/plantingManagement/addPlanting')">
        <roc-icon-plus type="fas" name="plus" :size="16" color="#fff"></roc-icon-plus>
        <text>新增</text>
      </view>
    </view>
    
    <view class="search-bar">
      <view class="search-input">
        <roc-icon-plus type="fas" name="search" :size="16" color="#999"></roc-icon-plus>
        <input type="text" placeholder="搜索日期、地块..." v-model="searchKey" @confirm="searchPlanting" />
      </view>
    </view>
    
    <view class="filter-tags">
      <view 
        class="tag" 
        :class="{ active: activeFilter === 'all' }" 
        @click="filterBy('all')"
      >全部记录</view>
      <view 
        class="tag" 
        :class="{ active: activeFilter === 'recent' }" 
        @click="filterBy('recent')"
      >最近7天</view>
      <view 
        class="tag" 
        :class="{ active: activeFilter === 'month' }" 
        @click="filterBy('month')"
      >本月</view>
      <view 
        class="tag" 
        :class="{ active: activeFilter === 'by-date' }" 
        @click="filterBy('by-date')"
      >按日期</view>
      <view 
        class="tag" 
        :class="{ active: activeFilter === 'by-land' }" 
        @click="filterBy('by-land')"
      >按地块</view>
    </view>
    
    <view class="planting-list">
      <view class="planting-item" v-for="(item, index) in filteredPlantingList" :key="index" @click="viewDetail(item)">
        <view class="item-header">
          <view class="date-time">{{ item.date }} {{ item.time }}</view>
          <roc-icon-plus type="fas" name="chevron-right" :size="16" color="#999"></roc-icon-plus>
        </view>
        
        <view class="item-body">
          <view class="land-info">
            <text class="label">地块/条田</text>
            <text class="value">{{ item.land }}</text>
          </view>
          
          <view class="crop-info">
            <text class="label">农作物/种子</text>
            <text class="value">{{ item.crop }}</text>
          </view>
          
          <view class="planting-info">
            <view class="planting-area">
              <text class="label">播种面积</text>
              <text class="value">{{ item.area }} 亩</text>
            </view>
            
            <view class="planting-method">
              <text class="label">播种方式</text>
              <view class="method-tag" :class="getMethodClass(item.method)">
                <roc-icon-plus 
                  type="fas" 
                  :name="getMethodIcon(item.method)" 
                  :size="14" 
                  :color="getMethodIconColor(item.method)"
                ></roc-icon-plus>
                <text>{{ item.method }}</text>
              </view>
            </view>
          </view>
        </view>
        
        <view class="item-footer">
          <view class="action-btn edit" @click.stop="editPlanting(item)">
            <roc-icon-plus type="fas" name="edit" :size="14" color="#666"></roc-icon-plus>
          </view>
          <view class="action-btn delete" @click.stop="confirmDelete(item)">
            <roc-icon-plus type="fas" name="trash" :size="14" color="#666"></roc-icon-plus>
          </view>
        </view>
      </view>
      
      <view class="empty-list" v-if="filteredPlantingList.length === 0">
        <text>暂无播种记录</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '播种管理',
      activeFilter: 'all',
      searchKey: '',
      plantingList: [
        {
          id: 1,
          date: '2023年10月15日',
          time: '08:30',
          land: '一号地块',
          crop: '冬小麦/中麦175',
          area: 15.6,
          method: '水直播-无人机'
        },
        {
          id: 2,
          date: '2023年10月12日',
          time: '14:15',
          land: '二号地块',
          crop: '玉米/郑单958',
          area: 23.2,
          method: '水直播-机械'
        },
        {
          id: 3,
          date: '2023年10月8日',
          time: '09:45',
          land: '三号地块',
          crop: '水稻/中早39',
          area: 18.7,
          method: '插秧-机械'
        },
        {
          id: 4,
          date: '2023年10月5日',
          time: '10:30',
          land: '四号地块',
          crop: '大豆/中黄13',
          area: 12.5,
          method: '插秧-机械'
        }
      ]
    }
  },
  computed: {
    filteredPlantingList() {
      let result = [...this.plantingList];
      
      // 搜索过滤
      if (this.searchKey) {
        result = result.filter(item => 
          item.date.includes(this.searchKey) || 
          item.land.includes(this.searchKey) ||
          item.crop.includes(this.searchKey)
        );
      }
      
      // 标签过滤
      const now = new Date();
      const oneWeekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
      const currentMonth = now.getMonth() + 1;
      const currentYear = now.getFullYear();
      
      switch (this.activeFilter) {
        case 'all':
          // 保持全部数据
          break;
        case 'recent':
          // 最近7天数据
          result = result.filter(item => {
            const dateMatch = item.date.match(/(\d{4})年(\d{1,2})月(\d{1,2})日/);
            if (!dateMatch) return false;
            const itemDate = new Date(dateMatch[1], dateMatch[2] - 1, dateMatch[3]);
            return itemDate >= oneWeekAgo;
          });
          break;
        case 'month':
          // 本月数据
          result = result.filter(item => {
            const dateMatch = item.date.match(/(\d{4})年(\d{1,2})月/);
            if (!dateMatch) return false;
            return parseInt(dateMatch[1]) === currentYear && parseInt(dateMatch[2]) === currentMonth;
          });
          break;
        case 'by-date':
          // 按日期排序
          result.sort((a, b) => {
            const dateA = new Date(a.date.replace(/年|月|日/g, match => match === '年' ? '-' : match === '月' ? '-' : ''));
            const dateB = new Date(b.date.replace(/年|月|日/g, match => match === '年' ? '-' : match === '月' ? '-' : ''));
            return dateB - dateA;
          });
          break;
        case 'by-land':
          // 按地块排序
          result.sort((a, b) => a.land.localeCompare(b.land, 'zh-CN'));
          break;
      }
      
      return result;
    }
  },
  methods: {
    navigateTo(url) {
      uni.navigateTo({
        url: url
      });
    },
    goBack() {
      uni.navigateBack();
    },
    filterBy(filter) {
      this.activeFilter = filter;
    },
    searchPlanting() {
      console.log('搜索关键词：', this.searchKey);
      // 搜索通过计算属性自动完成
    },
    viewDetail(item) {
      uni.navigateTo({
        url: `/pages/agriculture/plantingManagement/plantingDetail?id=${item.id}`
      });
    },
    editPlanting(item) {
      uni.navigateTo({
        url: `/pages/agriculture/plantingManagement/addPlanting?id=${item.id}`
      });
    },
    confirmDelete(item) {
      uni.showModal({
        title: '确认删除',
        content: `确定要删除${item.date}的播种记录吗？`,
        success: (res) => {
          if (res.confirm) {
            this.deletePlanting(item.id);
          }
        }
      });
    },
    deletePlanting(id) {
      const index = this.plantingList.findIndex(item => item.id === id);
      if (index !== -1) {
        this.plantingList.splice(index, 1);
        uni.showToast({
          title: '删除成功',
          icon: 'success'
        });
      }
    },
    getMethodClass(method) {
      if (method.includes('水直播')) return 'method-water';
      if (method.includes('旱直播')) return 'method-dry';
      if (method.includes('插秧')) return 'method-transplant';
      return '';
    },
    getMethodIcon(method) {
      if (method.includes('水直播')) return 'water';
      if (method.includes('旱直播')) return 'seedling';
      if (method.includes('插秧')) return 'seedling';
      return 'seedling';
    },
    getMethodIconColor(method) {
      if (method.includes('水直播')) return '#4fc3f7';
      if (method.includes('旱直播')) return '#66bb6a';
      if (method.includes('插秧')) return '#ff9800';
      return '#333';
    }
  }
}
</script>

<style lang="scss">
.planting-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  
  .header {
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    background-color: #fff;
    box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
    
    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
    
    .add-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12rpx 30rpx;
      background-color: #5654e8;
      border-radius: 8rpx;
      
      text {
        color: #fff;
        font-size: 28rpx;
        margin-left: 10rpx;
      }
    }
  }
  
  .search-bar {
    padding: 20rpx 30rpx;
    background-color: #fff;
    
    .search-input {
      display: flex;
      align-items: center;
      height: 80rpx;
      background-color: #f5f5f5;
      border-radius: 40rpx;
      padding: 0 30rpx;
      
      roc-icon-plus {
        margin-right: 10rpx;
      }
      
      input {
        flex: 1;
        height: 80rpx;
        font-size: 28rpx;
      }
    }
  }
  
  .filter-tags {
    display: flex;
    padding: 20rpx 30rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #f0f0f0;
    overflow-x: auto;
    white-space: nowrap;
    
    .tag {
      display: inline-block;
      padding: 12rpx 30rpx;
      background-color: #f5f5f5;
      border-radius: 30rpx;
      margin-right: 20rpx;
      font-size: 26rpx;
      color: #666;
      
      &.active {
        background-color: #e6e5ff;
        color: #5654e8;
      }
    }
  }
  
  .planting-list {
    padding: 20rpx;
    
    .planting-item {
      background-color: #fff;
      border-radius: 12rpx;
      padding: 30rpx;
      margin-bottom: 20rpx;
      box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.03);
      
      .item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
        
        .date-time {
          font-size: 28rpx;
          color: #666;
        }
      }
      
      .item-body {
        margin-bottom: 20rpx;
        
        .land-info, .crop-info {
          display: flex;
          margin-bottom: 15rpx;
          
          .label {
            width: 180rpx;
            font-size: 28rpx;
            color: #999;
          }
          
          .value {
            flex: 1;
            font-size: 28rpx;
            color: #333;
            font-weight: 500;
          }
        }
        
        .planting-info {
          display: flex;
          justify-content: space-between;
          
          .planting-area, .planting-method {
            display: flex;
            flex-direction: column;
            
            .label {
              font-size: 26rpx;
              color: #999;
              margin-bottom: 10rpx;
            }
            
            .value {
              font-size: 32rpx;
              color: #5654e8;
              font-weight: bold;
            }
            
            .method-tag {
              display: flex;
              align-items: center;
              padding: 6rpx 16rpx;
              border-radius: 6rpx;
              
              roc-icon-plus {
                margin-right: 8rpx;
              }
              
              text {
                font-size: 26rpx;
              }
              
              &.method-water {
                background-color: #e3f2fd;
                color: #4fc3f7;
              }
              
              &.method-dry {
                background-color: #e8f5e9;
                color: #66bb6a;
              }
              
              &.method-transplant {
                background-color: #fff3e0;
                color: #ff9800;
              }
            }
          }
        }
      }
      
      .item-footer {
        display: flex;
        justify-content: flex-end;
        border-top: 1rpx solid #f0f0f0;
        padding-top: 20rpx;
        
        .action-btn {
          width: 60rpx;
          height: 60rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 20rpx;
          border-radius: 50%;
          background-color: #f5f5f5;
          
          &.edit {
            background-color: #f0f0f0;
          }
          
          &.delete {
            background-color: #ffeeee;
          }
        }
      }
    }
    
    .empty-list {
      padding: 100rpx 0;
      text-align: center;
      color: #999;
      font-size: 28rpx;
    }
  }
}
</style> 